<template>
  <div style="width: 100%; height: 100%">
    <Header title="本年计划基本信息" />
    <div class="content">
      <div class="box">
        <div class="box_left">
          <div>
            <img src="@/assets/images/index_model1.png" alt="">
            <p>超期数</p>
          </div>
        </div>
        <div class="box_right">
          <div class="box_row">
            <p class="box_value">{{ tableList.overtime1c }}</p>
            <p class="box_name">1c计划</p>
          </div>
          <div class="box_row">
            <p class="box_value">{{ tableList.overtime2c }}</p>
            <p class="box_name">2c计划</p>
          </div>
          <div class="box_row">
            <p class="box_value">{{ tableList.overtime4c }}</p>
            <p class="box_name">4c计划</p>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box_left">
          <div>
            <img class="img" src="@/assets/images/index_model2.png" alt="">
            <p>完成数</p>
          </div>
        </div>
        <div class="box_right">
          <div class="box_row">
            <p class="box_value">{{ tableList.complete1c }}</p>
            <p class="box_name">1c计划</p>
          </div>
          <div class="box_row">
            <p class="box_value">{{ tableList.complete2c }}</p>
            <p class="box_name">2c计划</p>
          </div>
          <div class="box_row">
            <p class="box_value">{{ tableList.complete4c }}</p>
            <p class="box_name">4c计划</p>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box_left">
          <div>
            <img src="@/assets/images/index_model3.png" alt="">
            <p>总数</p>
          </div>
        </div>
        <div class="box_right">
          <div class="box_row">
            <p class="box_value">{{ tableList.total1c }}</p>
            <p class="box_name">1c计划</p>
          </div>
          <div class="box_row">
            <p class="box_value">{{ tableList.total2c }}</p>
            <p class="box_name">2c计划</p>
          </div>
          <div class="box_row">
            <p class="box_value">{{ tableList.total4c }}</p>
            <p class="box_name">4c计划</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from './header.vue'
import { getYearPlanBasic } from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'

export default {
  components: {
    Header
  },
  props: {
    conditionFind: {
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      tableList: {}
    }
  },
  watch: {
    conditionFind: {
      handler: function(newQuestion, oldQuestion) {
        this.init()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      getYearPlanBasic(this.conditionFind).then((res) => {
        this.tableList = res.data
      })
    }
  }
}
</script>
<style scoped>
.content {
  width: 100%;
  height: calc(100% - 50px);
  padding: 30px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.box {
  width: 100%;
  height: 100px;
  background: rgba(218, 237, 255, 0.1);
  box-shadow: inset 0px 0px 9px rgba(170, 224, 255, 0.25);
  border: 1px solid #90dcff;
  border-radius: 12px;
  display: flex;
}
.box_left {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;

  font-weight: 500;
  color: #606266;
  line-height: 19px;
  background: rgba(235, 250, 255, 0.20000000298023224);

  border-radius: 12px 12px 12px 12px;
  opacity: 1;
  border-right: 1px solid #90dcff;
}
.box_right {
  width: calc(100% - 116px);
  height: 100%;
  display: flex;
  align-items: center;
}
.box_row {
  width: 33.3%;
  text-align: center;

}
.box_value {
  font-size: 30px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #409eff;
  line-height: 35px;
}
.box_name {
  font-size: 16px;
  font-family: Noto Sans SC-Regular, Noto Sans SC;
  font-weight: 400;
  color: #606266;
  line-height: 19px;
}

</style>
